<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" href="../PHO/ICO.ico" type="image/x-icon" />
		<link rel="stylesheet" href="../CSS/background.css">
		<link rel="stylesheet" href="../CSS/homepage.css">
		<script src="../JS/homepage.js"></script>
		<title>主页</title>
	</head>

	<body>
		<!-- 设置中间部分 -->
		<div class="mid" id="mid">
			<img id="ty1" src="../PHO/ty1.png">
			<img id="ty2" src="../PHO/ty2.png">
			<div></div>
			<a href="net.html">网络图</a>
		</div>
		<!-- 设置左边部分 -->
		<div id="left" class="left">
			<img id="lrarrow" src="../PHO/Lrarrow.png" />
			<div> </div>
			<a href="resource.html">
				资料<br>
			</a>
		</div>
		<!-- 设置右边部分 -->
		<div id="right" class="right">
			<img id="rlarrow" src="../PHO/Rlarrow.png" />
			<div></div>
			<a href="me.html">我</a>
		</div>


		<!-- 切换画面函数 -->
		<script type="text/javascript">
			var mid = document.getElementById('mid');
			var right = document.getElementById('right');
			var left = document.getElementById('left');
			mid.style.opacity = 0;
			right.style.opacity = 0;
			left.style.opacity = 0;
			right.style.transform = 'translateX(500px)'
			left.style.transform = 'translateX(-500px)'
			setTimeout(function(){
			mid.style.opacity = 1;
			mid.style.transition="1s linear"
			right.style.opacity = 1;
			left.style.opacity = 1;
			right.style.transform = 'translateX(0px)'
			left.style.transform = 'translateX(0px)'
			right.style.transition="1s ease-in"
			left.style.transition="1s ease-in"
			},100)
			//椭圆转动 &包含会加速的彩蛋(不会修)
			var x =4;
			var t = 0;
			var Interval;
			var ty1 = document.getElementById('ty1');
			var ty2 = document.getElementById('ty2');
			//emm又修好了(原来重复调用了rotate()但是没有clearInterval() *~* )
			window.onload = function() {
				rotate();
				mid.onmouseleave = function() {
					x = 6;
				}
				mid.onmousemove = function() {
					x = 3;
				}
				function rotate() {
					Interval = setInterval(function() {
						t += x;
						ty1.style.transform = 'rotate(' + t + 'deg)';
						ty1.style.transition = '0.1s linear';
						ty2.style.transform = 'rotate(' + (-0.5 * t) + 'deg)';
						ty2.style.transition = '0.1s linear';
					}, 100)
				}
			}
		</script>
	</body>
</html>
